<template>
  <div>
    <nav class="navigation scroll-bar">
        <div class="container ps-0 pe-0">
            <div class="nav-content">
<!--                <div class="nav-wrap bg-white bg-transparent-card rounded-xxl shadow-xss pt-3 pb-1 mb-2 mt-2">-->
<!--                    <div class="nav-caption fw-600 font-xssss text-grey-500"><span>Yu</span>bao</div>-->
<!--                    <ul class="mb-1 top-content">-->
<!--                        <li class="logo d-none d-xl-block d-lg-block"></li>-->
<!--                        <li>-->
<!--                          <el-link to="/"  class="nav-content-bttn open-font" >-->
<!--                            <i class="feather-tv btn-round-md bg-blue-gradiant me-3"></i><span>新闻摘要</span>-->
<!--                          </el-link>-->
<!--                        </li>-->

<!--                      <li>-->
<!--                        <el-link to="/Badge" class="nav-content-bttn open-font">-->
<!--                          <i class="feather-award btn-round-md bg-red-gradiant me-3"></i><span>徽章</span>-->
<!--                        </el-link>-->
<!--                      </li>-->

<!--                        <li>-->
<!--                          <el-link to="/Storie" class="nav-content-bttn open-font" >-->
<!--                            <i class="feather-globe btn-round-md bg-gold-gradiant me-3"></i><span>探索的故事</span>-->
<!--                          </el-link>-->
<!--                        </li>-->

<!--                        <li>-->
<!--                          <el-link to="/Sgroup" class="nav-content-bttn open-font">-->
<!--                            <i class="feather-zap btn-round-md bg-mini-gradiant me-3"></i><span>受欢迎的团体</span>-->
<!--                          </el-link>-->
<!--                        </li>-->

<!--                        <li>-->
<!--                          <el-link to="/UserPage" class="nav-content-bttn open-font">-->
<!--                            <i class="feather-user btn-round-md bg-primary-gradiant me-3"></i><span>作者简介 </span>-->
<!--                          </el-link>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
              <!--左边栏菜单-->
              <div class="nav-wrap bg-white bg-transparent-card rounded-xxl shadow-xss pt-3 pb-1 mb-2">
                <div class="nav-caption fw-600 font-xssss text-grey-500"><span>Yu </span>Bao</div>
                <ul class="mb-3">
                  <li><a href="default-email-box.html" class="nav-content-bttn open-font"><i class="font-xl text-current feather-tv me-3"></i><span>首页</span><span class="circle-count bg-warning mt-1">584</span></a></li>
                  <li><a href="default-hotel.html" class="nav-content-bttn open-font"><i class="font-xl text-current feather-award me-3"></i><span>文章摘要</span></a></li>
                  <li><a href="default-hotel.html" class="nav-content-bttn open-font"><i class="font-xl text-current feather-globe me-3"></i><span>探索的故事</span></a></li>
                  <li><a href="default-event.html" class="nav-content-bttn open-font"><i class="font-xl text-current feather-zap me-3"></i><span>受欢迎的团体</span></a></li>
                  <li><a href="default-live-stream.html" class="nav-content-bttn open-font"><i class="font-xl text-current feather-user me-3"></i><span>作者简介</span></a></li>
                </ul>
              </div>
              <!--左边栏菜单-->
                <div class="nav-wrap bg-white bg-transparent-card rounded-xxl shadow-xss pt-3 pb-1 mb-2">
                    <div class="nav-caption fw-600 font-xssss text-grey-500"><span>More </span>Pages</div>
                    <ul class="mb-3">
                        <li><a href="default-email-box.html" class="nav-content-bttn open-font"><i class="font-xl text-current feather-inbox me-3"></i><span>电子邮箱</span><span class="circle-count bg-warning mt-1">584</span></a></li>
                        <li><a href="default-hotel.html" class="nav-content-bttn open-font"><i class="font-xl text-current feather-home me-3"></i><span>附近的酒店</span></a></li>
                        <li><a href="default-event.html" class="nav-content-bttn open-font"><i class="font-xl text-current feather-map-pin me-3"></i><span>最新的事件</span></a></li>
                        <li><a href="default-live-stream.html" class="nav-content-bttn open-font"><i class="font-xl text-current feather-youtube me-3"></i><span>直播</span></a></li>
                    </ul>
                </div>
                <div class="nav-wrap bg-white bg-transparent-card rounded-xxl shadow-xss pt-3 pb-1">
                    <div class="nav-caption fw-600 font-xssss text-grey-500"><span></span> Account</div>
                    <ul class="mb-1">
                        <li class="logo d-none d-xl-block d-lg-block"></li>
                        <li><a href="default-settings.html" class="nav-content-bttn open-font h-auto pt-2 pb-2"><i class="font-sm feather-settings me-3 text-grey-500"></i><span>Settings</span></a></li>
                        <li><a href="default-analytics.html" class="nav-content-bttn open-font h-auto pt-2 pb-2"><i class="font-sm feather-pie-chart me-3 text-grey-500"></i><span>Analytics</span></a></li>
                        <li><a href="default-message.html" class="nav-content-bttn open-font h-auto pt-2 pb-2"><i class="font-sm feather-message-square me-3 text-grey-500"></i><span>Chat</span><span class="circle-count bg-warning mt-0">23</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
  </div>
</template>

<script>
export default {
  components: {},
  mounted() {
    $('.nav-menu').on('click', function () {
      //alert("点歌锤子！！1");
      $(this).toggleClass('active');
      $('.navigation').toggleClass('nav-active');

    });

    $('.close-nav').on('click', function () {
      $('.navigation').removeClass('nav-active');
      return false;
    });


    $('.toggle-menu-color input').on('change', function () {
      if (this.checked) {
        $('.navigation').addClass('menu-current-color');
      } else {
        $('.navigation').removeClass('menu-current-color');
      }
    });

    $('.toggle-menu input').on('change', function () {
      if (this.checked) {
        $('.navigation,.main-content').addClass('menu-active');
      } else {
        $('.navigation,.main-content').removeClass('menu-active');
      }
    });
    // 在组件挂载后打印当前路径到控制台
    //console.log("路由路径为:"+ this.$route.path);
    const TopPath=this.$route.path;

    switch (TopPath) {
      case '/':
        console.log('路由路径为: /');
        break;
      case '/Storie':
        // 获取包含 id="s1" 的 <i> 标签的元素
        const iconElement1 = document.getElementById('s1');
        // 获取 <i> 标签的 class 属性值
        let iconClass1 = iconElement1.className;
        // 将 alert-primary 替换为 text-grey-500
        iconClass1 = iconClass1.replace(/\balert-primary\b/g, 'bg-greylight');
        // 将 text-current 替换为 text-grey-500
        iconClass1 = iconClass1.replace(/\btext-current\b/g, 'text-grey-500');
        // 更新 <i> 标签的 class 属性值
        iconElement1.className = iconClass1;

        // 获取包含 id="s2" 的 <i> 标签的元素
        const iconElement2 = document.getElementById('s2');
        // 获取 <i> 标签的 class 属性值
        let iconClass2 = iconElement2.className;
        // 将 text-grey-500 替换为 text-primary 和 alert-primary
        iconClass2 = iconClass2.replace(/\bbg-greylight\b/g, 'alert-primary');
        iconClass2 = iconClass2.replace(/\btext-grey-500\b/g, 'text-primary');
        // 更新 <i> 标签的 class 属性值
        iconElement2.className = iconClass2;
        console.log('路由路径为: /Storie');
        break;
      case '/Svideo':

        // 获取包含 id="s1" 的 <i> 标签的元素
        const sid = document.getElementById('s1');
        // 获取 <i> 标签的 class 属性值
        let sidClass = sid.className;
        // 将 alert-primary 替换为 text-grey-500
        sidClass = sidClass.replace(/\balert-primary\b/g, 'bg-greylight');
        // 将 text-current 替换为 text-grey-500
        sidClass = sidClass.replace(/\btext-current\b/g, 'text-grey-500');
        // 更新 <i> 标签的 class 属性值
        sid.className = sidClass;

        // 将 id="s2" 的 <i> 标签的样式还原为初始状态
        if (iconElement2) {
          iconElement2.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
        }
        // 获取包含 id="s3" 的 <i> 标签的元素
        const iconElement3 = document.getElementById('s3');
        // 获取 <i> 标签的 class 属性值
        let iconClass3 = iconElement3.className;
        // 将 text-grey-500 替换为 text-primary 和 alert-primary
        iconClass3 = iconClass3.replace(/\bbg-greylight\b/g, 'alert-primary');
        iconClass3 = iconClass3.replace(/\btext-grey-500\b/g, 'text-primary');
        // 更新 <i> 标签的 class 属性值
        iconElement3.className = iconClass3;
        console.log('路由路径为: /Svideo');
        break;
      case '/Sgroup':
        // 获取包含 id="s1" 的 <i> 标签的元素
        const sgid = document.getElementById('s1');

        // 获取 <i> 标签的 class 属性值
        let sgidClass = sgid.className;

        // 将 alert-primary 替换为 text-grey-500
        sgidClass = sgidClass.replace(/\balert-primary\b/g, 'bg-greylight');

        // 将 text-current 替换为 text-grey-500
        sgidClass = sgidClass.replace(/\btext-current\b/g, 'text-grey-500');

        // 更新 <i> 标签的 class 属性值
        sgid.className = sgidClass;

        // 将 id="s2" 的 <i> 标签的样式还原为初始状态
        if (iconElement2) {
          iconElement2.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
        }

        // 将 id="s3" 的 <i> 标签的样式还原为初始状态
        if (iconElement3) {
          iconElement3.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
        }

        // 获取包含 id="s4" 的 <i> 标签的元素
        const iconElement4 = document.getElementById('s4');

        // 获取 <i> 标签的 class 属性值
        let iconClass4 = iconElement4.className;

        // 将 text-grey-500 替换为 text-primary 和 alert-primary
        iconClass4 = iconClass4.replace(/\bbg-greylight\b/g, 'alert-primary');
        iconClass4 = iconClass4.replace(/\btext-grey-500\b/g, 'text-primary');

        // 更新 <i> 标签的 class 属性值
        iconElement4.className = iconClass4;

        console.log('路由路径为: /Sgroup');
        break;
      case '/Shopping':
        // 获取包含 id="s1" 的 <i> 标签的元素
        const shid = document.getElementById('s1');

        // 获取 <i> 标签的 class 属性值
        let shidClass = shid.className;

        // 将 alert-primary 替换为 text-grey-500
        shidClass = shidClass.replace(/\balert-primary\b/g, 'bg-greylight');

        // 将 text-current 替换为 text-grey-500
        shidClass = shidClass.replace(/\btext-current\b/g, 'text-grey-500');

        // 更新 <i> 标签的 class 属性值
        shid.className = shidClass;

        // 将 id="s2" 的 <i> 标签的样式还原为初始状态
        if (iconElement2) {
          iconElement2.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
        }

        // 将 id="s3" 的 <i> 标签的样式还原为初始状态
        if (iconElement3) {
          iconElement3.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
        }

        // 将 id="s4" 的 <i> 标签的样式还原为初始状态
        if (iconElement4) {
          iconElement4.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
        }

        // 获取包含 id="s5" 的 <i> 标签的元素
        const iconElement5 = document.getElementById('s5');

        // 获取 <i> 标签的 class 属性值
        let iconClass5 = iconElement5.className;

        // 将 text-grey-500 替换为 text-primary 和 alert-primary
        iconClass5 = iconClass5.replace(/\bbg-greylight\b/g, 'alert-primary');
        iconClass5 = iconClass5.replace(/\btext-grey-500\b/g, 'text-primary');

        // 更新 <i> 标签的 class 属性值
        iconElement5.className = iconClass5;
        console.log('路由路径为: /Shopping');
        break;
      default:
        console.log('未知路由');
    }

    // if(TopPath==='/'){
    //   alert("你点击了首页");
    // }
    // if(TopPath==='/Storie'){
    //   alert("你点击了故事");
    // }
    // if(TopPath==='/Svideo'){
    //   alert("你点击了直播");
    // }
    // if(TopPath==='/Sgroup'){
    //   alert("你点击了分组");
    // }
    // if(TopPath==='/Shopping'){
    //   alert("你点击了购物");
    // }
  },
  methods: {


    toggleMenu(){

    },
    open1() {
      const h = this.$createElement;

      this.$notify({
        //duration: 0, //是否自动关闭
        offset: 70,
        //position: 'absolute', // 设置position为absolute
        //right: '2000px', // 设置右边距为200px
        customClass: 'notification-with-margin', // 添加自定义样式类
        title: '消息通知',
        message: h('i', { style: 'color: #303133'}, '我是一条淡水鱼，我生活在小河里，可以无忧的过完一生，但是我觉得很无聊，我想去海里，也许海水并不适合我生存，可与其在河水里重复同样的生活，把一生过得和一天一样，我宁愿在海里咸死。')

      });
    }
  },
    head() {
    // 引入js,css
    return {
      link: [
        { rel: 'stylesheet', href: '/css/themify-icons.css' },
        { rel: 'stylesheet', href: '/css/feather.css' },
        { rel: 'stylesheet', href: '/css/style.css' },
        { rel: 'stylesheet', href: '/css/emoji.css' },
        { rel: 'stylesheet', href: '/css/lightbox.css' }
      ],
    script: [
     // { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'},
        {src: '/js/jquery.min.js' },
        { src: '/js/plugin.js' },
        { src: '/js/lightbox.js' },
        { src: '/js/scripts.js' },

    ]
    }
  }

}
</script>

<style>

</style>
